.pure-modal {
    position: fixed;
    display: var(--pure-modal-display, none);
    flex-direction: column;
    transition-property: all;
    transition-duration: var(--pure-modal-transition-duration, 0.3s);
    transition-timing-function: var(--pure-modal-transition-timing-function, ease-in-out);
    z-index: var(--pure-modal-z-index, var(--pure-z-index-upper));
    margin: var(--window-top) 0 var(--window-bottom) 0;
    box-sizing: border-box;
    left: var(--pure-modal-left, 50%);
    top: var(--pure-modal-top, 50%);
    right: var(--pure-modal-right, auto);
    bottom: var(--pure-modal-bottom, auto);
    transform: var(--pure-modal-transform, translate(-50%, -50%));
    width: var(--pure-modal-width, 100%);
    max-width: var(--pure-modal-max-width, 75%);
    height: var(--pure-modal-height, auto);
    max-height: var(--pure-modal-max-height, 40%);
    padding: var(--pure-modal-padding, 0);
    background: var(--pure-modal-background, var(--pure-background-element));
    opacity: var(--pure-modal-opacity, 0);
    border-radius: var(--pure-modal-border-radius, 5px);
}

.pure-modal-header {
    width: 100%;
    flex-shrink: 0;
    box-sizing: border-box;
    padding: var(--pure-modal-header-padding, 15px);
    font-size: var(--pure-modal-header-font-size);
    font-weight: var(--pure-modal-header-font-weight, 600);
    color: var(--pure-modal-header-color);
    text-align: var(--pure-modal-header-text-align, center);
    border-style: var(--pure-modal-header-border-style, solid);
    border-color: var(--pure-modal-header-border-color, var(--pure-border-color-default));
    border-top-width: var(--pure-modal-header-border-top-width, 0);
    border-bottom-width: var(--pure-modal-header-border-bottom-width, 1px);
    border-left-width: var(--pure-modal-header-border-left-width, 0);
    border-right-width: var(--pure-modal-header-border-right-width, 0);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    position: relative;
}

.pure-modal-title {
    margin: var(--pure-modal-title-margin);
    padding: var(--pure-modal-title-padding);
    font-size: var(--pure-modal-title-font-size);
    font-weight: var(--pure-modal-title-font-weight);
    color: var(--pure-modal-title-color);
    text-align: var(--pure-modal-title-text-align);
    flex: 1;
}

.pure-modal-body {
    width: 100%;
    flex-grow: 1;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: stretch;
}

.pure-modal-scroll-view {
    width: 100%;
    flex-grow: 1;

    /* #ifdef MP-XHS */
    height: var(--pure-modal-content-height, 200px);
    /* #endif */
}

.pure-modal-footer {
    width: 100%;
    flex-shrink: 0;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-size: var(--pure-modal-footer-font-size);
    font-weight: var(--pure-modal-footer-font-weight);
    color: var(--pure-modal-footer-color);
    text-align: var(--pure-modal-footer-text-align);
    border-style: var(--pure-modal-footer-border-style, solid);
    border-color: var(--pure-modal-footer-border-color, var(--pure-border-color-default));
    border-top-width: var(--pure-modal-footer-border-top-width, 1px);
    border-bottom-width: var(--pure-modal-footer-border-bottom-width, 0);
    border-left-width: var(--pure-modal-footer-border-left-width, 0);
    border-right-width: var(--pure-modal-footer-border-right-width, 0);
    overflow: hidden;
    border-radius: 0 0 var(--pure-modal-border-radius, 5px) var(--pure-modal-border-radius, 5px);
}

.pure-modal-footer-buttons {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    --pure-button-border-width: var(--pure-modal-button-border-width, 0);
    --pure-button-border-radius: var(--pure-modal-button-border-radius, 0);
    font-size: var(--pure-modal-button-font-size);
    font-weight: var(--pure-modal-button-font-weight, 500);
}

.pure-modal-button {
    flex: 1;
    flex-shrink: 0;
}

.pure-modal-button-cancel {
    color: var(--pure-modal-button-cancel-color, var(--pure-text-color-regular));
}

.pure-modal-button-confirm {
    color: var(--pure-modal-button-confirm-color, var(--pure-theme-primary));
}

.pure-modal-button-gap-line {
    width: var(--pure-modal-button-gap-line-width, var(--pure-modal-footer-border-top-width, 1px));
    background: var(--pure-modal-button-gap-line-color, var(--pure-modal-footer-border-color, var(--pure-border-color-default)));
    flex-shrink: 0;
}

.pure-modal-hide-line {
    --pure-modal-footer-border-top-width: 0px;
}

.pure-modal-before-hide {
    --pure-modal-opacity: var(--pure-modal-content-before-hide-opacity, 1);
    --pure-modal-transform: var(--pure-modal-content-before-hide-transform);
    --pure-modal-display: flex;
}

.pure-modal-to-hide {
    --pure-modal-opacity: var(--pure-modal-content-to-hide-opacity, 0);
    --pure-modal-transform: var(--pure-modal-content-to-hide-transform);
    --pure-modal-display: flex;
}

.pure-modal-hide {
    --pure-modal-opacity: var(--pure-modal-content-hide-opacity, 0);
    --pure-modal-transform: var(--pure-modal-content-hide-transform);
    --pure-modal-display: none;
}

.pure-modal-before-show {
    --pure-modal-opacity: var(--pure-modal-content-before-show-opacity, 0);
    --pure-modal-transform: var(--pure-modal-content-before-show-transform);
    --pure-modal-display: flex;
}

.pure-modal-to-show {
    --pure-modal-opacity: var(--pure-modal-content-to-show-opacity, 1);
    --pure-modal-transform: var(--pure-modal-content-to-show-transform);
    --pure-modal-display: flex;
}

.pure-modal-show {
    --pure-modal-opacity: var(--pure-modal-content-show-opacity, 1);
    --pure-modal-transform: var(--pure-modal-content-show-transform);
    --pure-modal-display: flex;
}